<template>
  <div>
    <span style="margin: 0 10px 0 5%">Select:</span>
    <el-select v-model="value" placeholder="Choose" @change="handleChange">
      <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
    </el-select>
    <span style="margin: 0 10px 0 50%" />
    <el-button type="success" icon="el-icon-user" @click="handleNew">New</el-button>
  </div>
</template>

<script>
export default {
  name: 'PersonTool',
  props: {
    selected: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      value: '',
      options: [
        { value: false, label: '已完成' },
        { value: true, label: '待复习' }
      ]
    }
  },
  watch: {
    selected: {
      immediate: true,
      handler(newVal) {
        this.value = newVal
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('update:selected', value)
    },
    handleNew() {
      this.$emit('new')
    }
  }
}
</script>

<style scoped>

</style>
